<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html>
<head>
<title>PyQt4 Widgets II</title>
<link rel="stylesheet" href="/cfg/format.css" type="text/css">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="keywords" content="PyQt, PyQt4, Widgets, Controls, tutorial, Python, Linux">
<meta name="description" content="In this chapter of the PyQt4 tutorial, we
continue describing PyQt4 widgets.">
<meta name="language" content="en">
<meta name="author" content="Jan Bodnar">
<meta name="distribution" content="global">

<script type="text/javascript" src="/lib/jquery.js"></script>
<script type="text/javascript" src="/lib/common.js"></script>

</head>

<body>

<div class="container">

<div id="wide_ad" class="ltow">
<script type="text/javascript"><!--
google_ad_client = "pub-9706709751191532";
/* 160x600, August 2011 */
google_ad_slot = "2484182563";
google_ad_width = 160;
google_ad_height = 600;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>

<div class="content">


<a href="/" title="Home">Home</a>&nbsp;
<a href=".." title="Home">Contents</a>


<h1>PyQt4 Widgets II</h1>


<p>
Here we will continue introducing PyQt4 widgets. We will cover <code>QtGui.QPixmap</code>,
<code>QtGui.QLineEdit</code>, <code>QtGui.QSplitter</code> and <code>QtGui.QComboBox</code>.
</p>

<script type="text/javascript"><!--
google_ad_client = "pub-9706709751191532";
/* NewSquare */
google_ad_slot = "0364418177";
google_ad_width = 300;
google_ad_height = 250;
//-->
</script> 
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> 
</script>

<h2>QtGui.QPixmap</h2>

<p>
<code>QtGui.QPixmap</code> is one of the widgets used to work with images. 
It is optimized for showing images on screen.
In our code example, we will use <code>QtGui.QPixmap</code> to 
display an image on the window.
</p>

<pre class="code">
#!/usr/bin/python
# -*- coding: utf-8 -*-

"""
ZetCode PyQt4 tutorial 

In this example, we dispay an image
on the window. 

author: Jan Bodnar
website: zetcode.com 
last edited: September 2011
"""

import sys
from PyQt4 import QtGui, QtCore

class Example(QtGui.QWidget):
    
    def __init__(self):
        super(Example, self).__init__()
        
        self.initUI()
        
    def initUI(self):      

        hbox = QtGui.QHBoxLayout(self)
        pixmap = QtGui.QPixmap("redrock.png")

        lbl = QtGui.QLabel(self)
        lbl.setPixmap(pixmap)

        hbox.addWidget(lbl)
        self.setLayout(hbox)
        
        self.move(300, 200)
        self.setWindowTitle('Red Rock')
        self.show()        
        
def main():
    
    app = QtGui.QApplication(sys.argv)
    ex = Example()
    sys.exit(app.exec_())


if __name__ == '__main__':
    main()    
</pre>

<p>
In our example, we display an image on the window. 
</p>

<pre class="explanation">
pixmap = QtGui.QPixmap("redrock.png")
</pre>

<p>
We create a <code>QtGui.QPixmap</code> object. It takes the name of the file
as a parameter. 
</p>

<pre class="explanation">
lbl = QtGui.QLabel(self)
lbl.setPixmap(pixmap)
</pre>

<p>
We put the pixmap into the <code>QtGui.QLabel</code> widget.
</p>



<h2>QtGui.QLineEdit</h2>

<p>
<code>QtGui.QLineEdit</code> is a widget that allows to enter and 
edit a single line of plain text. 
There are undo/redo, cut/paste and drag &amp; drop functions available 
for <code>QtGui.QLineEdit</code> widget. 
</p>

<pre class="code">
#!/usr/bin/python
# -*- coding: utf-8 -*-

"""
ZetCode PyQt4 tutorial 

This example shows text which 
is entered in a QtGui.QLineEdit
in a QtGui.QLabel widget.
 
author: Jan Bodnar
website: zetcode.com 
last edited: August 2011
"""

import sys
from PyQt4 import QtGui, QtCore

class Example(QtGui.QWidget):
    
    def __init__(self):
        super(Example, self).__init__()
        
        self.initUI()
        
    def initUI(self):      

        self.lbl = QtGui.QLabel(self)
        qle = QtGui.QLineEdit(self)
        
        qle.move(60, 100)
        self.lbl.move(60, 40)

        qle.textChanged[str].connect(self.onChanged)
        
        self.setGeometry(300, 300, 280, 170)
        self.setWindowTitle('QtGui.QLineEdit')
        self.show()
        
    def onChanged(self, text):
        
        self.lbl.setText(text)
        self.lbl.adjustSize()        
        
        
def main():
    
    app = QtGui.QApplication(sys.argv)
    ex = Example()
    sys.exit(app.exec_())


if __name__ == '__main__':
    main()
</pre>

<p>
This example shows a line edit widget and a label. The text that we key in the line edit 
is displayed immediately in the label widget.
</p>

<pre class="explanation">
qle = QtGui.QLineEdit(self)
</pre>

<p>
The <code>QtGui.QLineEdit</code> widget is created.
</p>

<pre class="explanation">
qle.textChanged[str].connect(self.onChanged)
</pre>

<p>
If the text in the line edit widget changes, we call the onChanged() method.
</p>

<pre class="explanation">
def onChanged(self, text):
    
    self.lbl.setText(text)
    self.lbl.adjustSize() 
</pre>

<p>
Inside the onChanged() method, we set the typed text to the label widget. 
We call the <code>adjustSize()</code> method to adjust the size of the
label to the length of the text.
</p>


<br>
<img src="/img/gui/pyqt4/qlineedit.png" alt="QtGui.QLineEdit">
<div class="figure">Figure: QtGui.QLineEdit</div>



<h2>QtGui.QSplitter</h2>

<p>
<code>QtGui.QSplitter</code> lets the user control the size of child widgets 
by dragging the boundary between the children. In our example, we show three 
<code>QtGui.QFrame</code> widgets organized with two splitters.
</p>


<pre class="code">
#!/usr/bin/python
# -*- coding: utf-8 -*-

"""
ZetCode PyQt4 tutorial 

This example shows
how to use QtGui.QSplitter widget.
 
author: Jan Bodnar
website: zetcode.com 
last edited: September 2011
"""

import sys
from PyQt4 import QtGui, QtCore

class Example(QtGui.QWidget):
    
    def __init__(self):
        super(Example, self).__init__()
        
        self.initUI()
        
    def initUI(self):      

        hbox = QtGui.QHBoxLayout(self)

        topleft = QtGui.QFrame(self)
        topleft.setFrameShape(QtGui.QFrame.StyledPanel)
 
        topright = QtGui.QFrame(self)
        topright.setFrameShape(QtGui.QFrame.StyledPanel)

        bottom = QtGui.QFrame(self)
        bottom.setFrameShape(QtGui.QFrame.StyledPanel)

        splitter1 = QtGui.QSplitter(QtCore.Qt.Horizontal)
        splitter1.addWidget(topleft)
        splitter1.addWidget(topright)

        splitter2 = QtGui.QSplitter(QtCore.Qt.Vertical)
        splitter2.addWidget(splitter1)
        splitter2.addWidget(bottom)

        hbox.addWidget(splitter2)
        self.setLayout(hbox)
        QtGui.QApplication.setStyle(QtGui.QStyleFactory.create('Cleanlooks'))
        
        self.setGeometry(300, 300, 300, 200)
        self.setWindowTitle('QtGui.QSplitter')
        self.show()
        
    def onChanged(self, text):
        
        self.lbl.setText(text)
        self.lbl.adjustSize()        
        
        
def main():
    
    app = QtGui.QApplication(sys.argv)
    ex = Example()
    sys.exit(app.exec_())


if __name__ == '__main__':
    main()    
</pre>

<p>
In our example we have three frame widgets and two splitters.
</p>

<pre class="explanation">
topleft = QtGui.QFrame(self)
topleft.setFrameShape(QtGui.QFrame.StyledPanel)
</pre>

<p>
We use a styled frame in order to see boundaries between the
<code>QtGui.QFrame</code> widgets.
</p>

<pre class="explanation">
splitter1 = QtGui.QSplitter(QtCore.Qt.Horizontal)
splitter1.addWidget(topleft)
splitter1.addWidget(topright)
</pre>

<p>
We create a <code>QtGui.QSplitter</code> widget and add two 
frames into it. 
</p>

<pre class="explanation">
splitter2 = QtGui.QSplitter(QtCore.Qt.Vertical)
splitter2.addWidget(splitter1)
</pre>

<p>
We can also add splitter to another splitter widget.
</p>

<pre class="explanation">
QtGui.QApplication.setStyle(QtGui.QStyleFactory.create('Cleanlooks'))
</pre>

<p>
We use a Cleanlooks style. In some styles the frames are not
visible. 
</p>

<br>
<img src="/img/gui/pyqt4/qsplitter.png" alt="QtGui.QSplitter widget">
<div class="figure">Figure: QtGui.QSplitter widget</div>


<h2>QtGui.QComboBox</h2>

<p>
The <code>QtGui.QComboBox</code> is a widget that allows the 
user to choose from a list of options.
</p>


<pre class="code">
#!/usr/bin/python
# -*- coding: utf-8 -*-

"""
ZetCode PyQt4 tutorial 

This example shows
how to use QtGui.QComboBox widget.
 
author: Jan Bodnar
website: zetcode.com 
last edited: September 2011
"""

import sys
from PyQt4 import QtGui, QtCore

class Example(QtGui.QWidget):
    
    def __init__(self):
        super(Example, self).__init__()
        
        self.initUI()
        
    def initUI(self):      

        self.lbl = QtGui.QLabel("Ubuntu", self)

        combo = QtGui.QComboBox(self)
        combo.addItem("Ubuntu")
        combo.addItem("Mandriva")
        combo.addItem("Fedora")
        combo.addItem("Red Hat")
        combo.addItem("Gentoo")

        combo.move(50, 50)
        self.lbl.move(50, 150)

        combo.activated[str].connect(self.onActivated)        
         
        self.setGeometry(300, 300, 300, 200)
        self.setWindowTitle('QtGui.QComboBox')
        self.show()
        
    def onActivated(self, text):
      
        self.lbl.setText(text)
        self.lbl.adjustSize()  
                
def main():
    
    app = QtGui.QApplication(sys.argv)
    ex = Example()
    sys.exit(app.exec_())


if __name__ == '__main__':
    main()
</pre>


<p>
The example shows a <code>QtGui.QComboBox</code> and a <code>QtGui.QLabel</code>. 
The combo box has a list of six options. These are the names of Linux distros. 
The label widget shows the selected option from the combo box.
</p>

<pre class="explanation">
combo = QtGui.QComboBox(self)
combo.addItem("Ubuntu")
combo.addItem("Mandriva")
combo.addItem("Fedora")
combo.addItem("Red Hat")
combo.addItem("Gentoo")
</pre>

<p>
We create a <code>QtGui.QComboBox</code> widget and add five options into it.
</p>

<pre class="explanation">
combo.activated[str].connect(self.onActivated) 
</pre>

<p>
Upon an item selection, we call the <code>onActivated()</code> method.
</p>

<pre class="explanation">
def onActivated(self, text):
  
    self.lbl.setText(text)
    self.lbl.adjustSize() 
</pre>

<p>
Inside the method, we set the text of the chosen item to the label widget.
We adjust the size of the label. 
</p>


<br>
<img src="/img/gui/pyqt4/qcombobox.png" alt="QtGui.QComboBox">
<div class="figure">Figure: QtGui.QComboBox</div>

<hr class="btm">

<p>
In this part of the PyQt4 tutorial, we covered other four PyQt4 widgets. 
</p>

<br> 
<div class="center"> 
<script type="text/javascript"><!--
google_ad_client = "pub-9706709751191532";
/* horizontal */
google_ad_slot = "1734478269";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script> 
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> 
</script> 
</div>
<br> 


<div class="botNav, center">
<span class="botNavItem"><a href="/">Home</a></span> ‡ <span class="botNavItem"><a href="..">Contents</a></span> ‡ 
<span class="botNavItem"><a href="#">Top of Page</a></span>
</div>


<div class="footer">
<div class="signature">
<a href="/">ZetCode</a> last modified September 24, 2011  <span class="copyright">&copy; 2007 - 2013 Jan Bodnar</span>
</div>
</div>

</div> <!-- content -->

</div> <!-- container -->

</body>
</html>

